<template>
  <div class="attachment-obs-container">
    <el-card shadow="hover">
      <div class="system-menu-search mb15">
        <div class="breadcrumb-wrap">
          <el-breadcrumb separator="/">
            <el-breadcrumb-item v-for="(item, index) in breadcrumbs" :key="index">
              <span v-if="breadcrumbs.length - 1 > index" @click="goDirectory(item)"
                    class="tag-breadcrumb">{{ item.folderName }}</span>
              <span v-else>{{ item.folderName }}</span>
            </el-breadcrumb-item>
          </el-breadcrumb>
          <div class="show-change">
            <div>
              <span :class="currentTab == 'list' ? 'tab-active' : ''" @click="switchTab('list')">
                <el-icon><ele-Operation/></el-icon>列表文件
              </span>
            </div>
            <div>
              <span :class="currentTab == 'thumb' ? 'tab-active' : ''" @click="switchTab('thumb')">
                <el-icon><ele-Menu/></el-icon>缩略文件
              </span>
            </div>
          </div>
        </div>
      </div>
      <div class="list-wrap">
        <div v-if="currentTab == 'thumb'">
          <DirectoryItem
              :list="files"
              :source="queryParams.type"
              :folder="queryParams"
              @goDirectory="goDirectory"
              @showGallery="showGallery"
              @previewFile="previewDocFile"
              @callback="getAttachmentFileList"/>
        </div>
        <div v-else>
          <DirectoryItemList
              :list="files"
              :source="queryParams.type"
              :folder="queryParams"
              @goDirectory="goDirectory"
              @showGallery="showGallery"
              @previewFile="previewDocFile"
              @callback="getAttachmentFileList"/>
        </div>
      </div>
      <div class="list-pagination">
        <el-pagination
            background
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            v-model:current-page="queryParams.pageNum"
            v-model:page-size="queryParams.pageSize"
            :page-sizes="[10, 20, 30, 50]"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"/>
      </div>
    </el-card>

    <vue-easy-lightbox
        :visible="visibleRef"
        :imgs="imgs"
        :index="indexRef"
        @hide="onGalleryHide">
    </vue-easy-lightbox>
  </div>
</template>

<script lang="ts">
import {ref, toRefs, reactive, onBeforeMount, defineComponent} from 'vue';
import DirectoryItem from '/@/views/attachment/local/component/directoryItem.vue'
import {getFileList} from "/@/api/attachment";
import VueEasyLightbox from "vue-easy-lightbox";
import DirectoryItemList from "/@/views/attachment/local/component/directoryItemList.vue";

export default defineComponent({
  name: 'apiV1AttachmentDirectoryObsList',
  components: {
    DirectoryItemList,
    VueEasyLightbox,
    DirectoryItem
  },
  setup() {
    const editMenuRef = ref();
    const visibleRef = ref(false)
    const indexRef = ref(0)
    const imgs = ref([]);
    const excelPreviewDialogRef = ref()
    const docxPreviewDialogRef = ref()
    const pdfPreviewDialogRef = ref()
    const pptxPreviewDialogRef = ref()
    const state = reactive({
      queryParams: {
        type: "hwobs",
        keywords: null,
        directoryId: 0,
        directoryName: '根目录',
        pageNum: 1,
        pageSize: 30,
      },
      files: [],
      total: 0,
      breadcrumbs: [
        {
          folderName: '根目录',
          folderId: 0
        }
      ],
      currentTab: "list"
    });
    const acType = ref('add')
    onBeforeMount(() => {
      getAttachmentFileList()
    });
    const getAttachmentFileList = () => {
      state.files = [];
      getFileList(state.queryParams).then(res => {
        state.files = res.data.list;
        state.total = res.data.total;
        state.queryParams.pageNum = res.data.pageNum;
        state.queryParams.pageSize = res.data.pageSize;
        let _imgs = [];
        state.files.forEach((item) => {
          if (item.type == 'photo') {
            _imgs.push(item.src);
          }
        })
        imgs.value = _imgs;
      });
    };

    const handleSizeChange = (_size: number) => {
      state.queryParams.pageNum = 1
      state.queryParams.pageSize = _size
      getAttachmentFileList();
    };
    const handleCurrentChange = (_page: number) => {
      state.queryParams.pageNum = _page
      getAttachmentFileList();
    };
    const goDirectory = (_detail: any) => {
      state.queryParams.pageNum = 1;
      state.queryParams.directoryId = _detail.folderId;
      state.queryParams.directoryName = _detail.folderName;
      let _temp = [];
      let flag = false;
      for (let item of state.breadcrumbs) {
        if (_detail.folderId == item.folderId) {
          _temp.push(item);
          flag = true;
          break;
        } else {
          _temp.push(item);
        }
      }
      if (!flag) {
        _temp.push({
          folderId: _detail.id,
          folderName: _detail.name
        });
      }
      state.breadcrumbs = _temp;
      getAttachmentFileList();
    };

    const onGalleryHide = () => {
      visibleRef.value = false
    }
    const showGallery = (_src: string) => {
      for (const i in imgs.value) {
        if (imgs.value[i] == _src) {
          indexRef.value = Number(i);
          break;
        }
      }
      visibleRef.value = true
    };
    const switchTab = (_name: string) => {
      state.currentTab = _name;
    };
    const previewDocFile = (_detail: any) => {

    };
    return {
      editMenuRef,
      visibleRef,
      indexRef,
      imgs,
      acType,
      switchTab,
      ...toRefs(state),
      getAttachmentFileList,
      handleSizeChange,
      handleCurrentChange,
      goDirectory,
      onGalleryHide,
      showGallery,
      previewDocFile
    };
  },
});
</script>
<style lang="scss" scoped>
.attachment-obs-container {
  .breadcrumb-wrap {
    border-bottom: 1px solid #efefef;
    padding-bottom: 10px;
    margin-bottom: 10px;
    position: relative;
    line-height: 20px;

    .tag-breadcrumb {
      color: var(--el-color-primary);
      cursor: pointer;
    }

    .show-change {
      position: absolute;
      right: 0;
      top: 0;

      div {
        display: inline-block;

        span {
          margin-right: 10px;
          display: flex;
          align-items: center;
          cursor: pointer;

          .el-image {
            margin-right: 6px;
          }
        }

        .tab-active {
          font-weight: bold;
          color: #000000;
        }
      }
    }
  }

  .el-card {
    min-height: 88vh;

    .list-wrap {
      min-height: 70vh;
    }
  }
}
</style>
